<template>
 <div class="login-container">
    <div class="login-card">
      <h2 class="login-title">🚀 登录</h2>
      <el-form :model="form" ref="formRef" label-width="80px" class="login-form">
        <el-form-item label="账号">
          <el-input v-model="form.phone" placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" placeholder="请输入密码" show-password />
        </el-form-item>
                <!-- 添加验证码输入框 -->
                <el-form-item label="验证码">
          <div style="display: flex; ">
            <el-input
              v-model="form.captcha"
              placeholder="请输入验证码"
              style="flex: 1; margin-right: 10px;"
            />
            <img
              :src="captchaImage"
              alt="验证码"
              @click="refreshCaptcha"
              style="height: 36px; cursor: pointer; border: 1px solid #ccc;"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <div class="button-group">
            <el-button type="primary" :loading="btnLoading"  @click="onLogin" class="btn">登 录</el-button>
            <el-button @click="onReset" class="btn">重 置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { loginApi } from '@/api/user';
import { setupDynamicRoutes } from '@/router/permission'
import { useUserStore } from '../../store/user';
import { ref } from 'vue'

const router = useRouter();
//登陆逻辑
const form = ref({
  phone: '',
  password: ''
})
const btnLoading = ref(false); // 按钮loading控制
const onLogin = async () => {
  if (!form.value.phone || !form.value.password) {
    ElMessage.warning('请输入账号和密码');
    return;
  }
  
  btnLoading.value = true; // 开始loading

  try {
    const result = await loginApi(form.value);
    
    if (result.data) {
      const userStore = useUserStore();
      userStore.setToken(result.data.tokenValue);
      userStore.setUserInfo(result.data);
      await setupDynamicRoutes(result.data.menus);
      router.push('/app/index');
      ElMessage.success(`欢迎，${result.data.tag}！`);
    } else {
      ElMessage.error(result.msg);
    }
  } catch (error) {
    console.error(error);
    ElMessage.error('登录失败，请稍后重试');
  } finally {
    btnLoading.value = false; // 不管成功失败，最后一定关掉loading
  }
}
//重置表单
const onReset = () => {
  form.phone = ''
  form.password = ''
}
</script>

<style scoped>
.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('../../assets/login.jpg'); /* 🔁 改成你自己的图片路径 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.button-group {
  display: flex;
  justify-content: space-between;
}
::v-deep(.el-form-item__label) {
  color: #ffffff;
}
.black-label ::v-deep(.el-form-item__label) {
  color: #000000;  /* 设置标签字体颜色为黑色 */
}

.login-card {
  background: rgba(255, 255, 255, 0.15);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  width: 400px;
  color: white;
  animation: fadeIn 1s ease-out;
}

.login-title {
  text-align: center;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
}

.login-form .el-form-item {
  margin-bottom: 20px;
}

/* 输入框样式优化 */
.el-input__wrapper {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #fff;
  transition: border 0.3s ease;
}

.el-input__wrapper input {
  color: #fff !important;
}

.el-input__wrapper:hover {
  border: 1px solid #4fc3f7;
}

.el-input__wrapper.is-focus {
  border: 1px solid #03a9f4 !important;
  box-shadow: 0 0 4px #03a9f4;
}

/* 按钮样式优化 */
.el-button.btn {
  width: 100px;
  border: none;
  background: linear-gradient(135deg, #03a9f4, #00bcd4);
  color: white;
  font-weight: bold;
  transition: all 0.3s;
  border-radius: 8px;
}

.el-button.btn:hover {
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  transform: scale(1.05);
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>